<template>
  <div v-if="isHistory" class="modal-overlay">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-header-left">
          <img src="../../../assets/images/home-page/eq-right.png" alt="" />
          <span>告警历史</span>
        </div>
        <img @click="closeModal" src="../../../assets/images/home-page/close-bt.png" alt="" />
      </div>
      <div class="m-c-box">
        <div class="e-box">
          <div class="e-form">
            <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="88px">
              <el-form-item label="等级：" prop="alarmLevel">
                <el-select v-model="queryParams.alarmLevel" placeholder="等级" clearable style="width: 200px">
                  <el-option v-for="dict in alarmLevelList" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="处理状态：" prop="alarmStatus">
                <el-select v-model="queryParams.alarmStatus" placeholder="处理状态" clearable style="width: 200px">
                  <el-option
                    v-for="dict in alarmStatusList"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="告警时间：" style="width: 308px">
                <el-date-picker
                  v-model="dateRange"
                  value-format="YYYY-MM-DD"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="设备名或告警描述：" prop="deviceName" label-width="147px">
                <el-input
                  v-model="queryParams.deviceName"
                  placeholder="请输入用户名称"
                  clearable
                  style="width: 200px"
                />
              </el-form-item>
            </el-form>
          </div>
          <el-row :gutter="20">
            <!--用户数据-->
            <el-col :span="24" :xs="24">
              <el-row :gutter="12" class="mb8" style="display: flex; justify-content: space-between; padding: 0 20px">
                <div style="display: flex; justify-content: space-between; width: 120px">
                  <el-col :span="1.5">
                    <el-button
                      type="primary"
                      icon="Search"
                      style="background-color: #083b98; border-color: #083b98"
                      @click="handleQuery"
                      >查询</el-button
                    >
                  </el-col>
                  <el-col :span="1.5">
                    <el-button
                      style="background-color: transparent; border-color: #627f8f; color: #ffffff"
                      icon="Refresh"
                      @click="resetQuery"
                      >重置</el-button
                    >
                  </el-col>
                </div>
                <el-col :span="1.5">
                  <el-button
                    type="warning"
                    plain
                    icon="Download"
                    @click="handleExport"
                    v-hasPermi="['system:user:export']"
                    >导出</el-button
                  >
                </el-col>
                <!-- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar> -->
              </el-row>

              <el-table
                v-loading="loading"
                :data="userList"
                @selection-change="handleSelectionChange"
                style="width: 98%; margin: 0 auto"
              >
                <el-table-column label="序号" type="index" width="60" align="center" />
                <el-table-column label="设备名称" align="center" prop="deviceName" :show-overflow-tooltip="true" />
                <el-table-column label="信号类型" align="center" prop="pointName" :show-overflow-tooltip="true" />
                <el-table-column label="告警描述" align="center" prop="alarmDesc" :show-overflow-tooltip="true" />
                <el-table-column label="告警等级" align="center" prop="alarmLevel">
                  <template #default="scope">
                    <span>{{ scope.row.alarmLevel == 1 ? '一般' : scope.row.alarmLevel == 2 ? '严重' : '危急' }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="告警时间"
                  align="center"
                  prop="createTime"
                  width="160"
                  :show-overflow-tooltip="true"
                />
                <el-table-column label="处理状态" align="center" prop="alarmStatus">
                  <template #default="scope">
                    <span v-if="scope.row.alarmStatus == 0" style="color: #f2634f">未处理</span>
                    <span v-else-if="scope.row.alarmStatus == 1" style="color: #10dc56">已处理</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <div class="pagination-box"
              ><el-pagination
                :total="total"
                background
                v-model:current-page="queryParams.pageNum"
                v-model:page-size="queryParams.pageSize"
                @change="getList"
            /></div>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import { busDeviceAlarmInfo, exportData } from '@/api/auth/ledger.js';
  import axios from 'axios';
  import { tagsStore } from '@/stores';
  const authNav = tagsStore();
  const props = defineProps(['isHistory']);
  const emit = defineEmits();
  const userList = ref([]);
  const loading = ref(true);
  const showSearch = ref(true);
  const total = ref(0);
  const dateRange = ref([]);
  const alarmLevelList = ref([
    { label: '一般', value: 1 },
    { label: '严重', value: 2 },
    { label: '危急', value: 3 }
  ]);
  const alarmStatusList = ref([
    { label: '未处理', value: 0 },
    { label: '已处理', value: 1 }
  ]);
  const queryParams = ref({
    alarmContent: undefined,
    alarmDesc: undefined,
    alarmDetails: undefined,
    alarmLevel: undefined,
    alarmStatus: undefined,
    alarmSystem: undefined,
    deviceCode: undefined,
    deviceName: undefined,
    endTime: undefined,
    orderByDesc: undefined,
    pageNum: 1,
    pageSize: 10,
    pointId: undefined,
    pointName: undefined,
    startTime: undefined
  });

  const closeModal = () => {
    emit('closeModal');
  };
  defineExpose({
    getList
  });
  /** 导出按钮操作 */
  // const handleExport = () => {
  //   exportData(queryParams.value).then((res) => {
  //     // const headers = res.headers;
  //     const data = res;
  //     console.log('res', res.data);
  //     downloadFile(data);
  //   });
  // };
  const handleExport = () => {
    const url = '/api/ledger/busDeviceAlarmInfo/exportData'; // 替换为你的API地址
    const fileName = '告警历史.xlsx'; // 根据实际情况设置文件名

    // 使用axios发送GET请求
    axios({
      url: url,
      method: 'POST',
      responseType: 'blob',
      data: queryParams.value // 重要：设置响应类型为blob
    })
      .then((response) => {
        // 创建一个新的URL代表指定的File对象或Blob对象
        console.log('response', response);
        const url = window.URL.createObjectURL(new Blob([response.data]));
        // 创建一个a标签用于下载
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();

        // 清理
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);
      })
      .catch((error) => {
        console.error('导出文件失败:', error);
      });
  };
  /** 查询用户列表 */
  function getList() {
    loading.value = true;
    userList.value = [];
    if (!queryParams.value.deviceName) {
      queryParams.value.deviceName = authNav.deviceName;
    }
    busDeviceAlarmInfo(queryParams.value).then((res) => {
      loading.value = false;
      userList.value = res.data.data;
      total.value = res.data.total;
    });
  }
  /** 搜索按钮操作 */
  const handleQuery = () => {
    queryParams.value.pageNum = 1;
    queryParams.value.startTime = dateRange.value[0] || undefined;
    queryParams.value.endTime = dateRange.value[1] || undefined;
    console.log('queryParams.value', dateRange.value[0]);
    getList();
  };
  /** 重置按钮操作 */
  const resetQuery = () => {
    dateRange.value = [];
    queryParams.value = {
      alarmContent: undefined,
      alarmDesc: undefined,
      alarmDetails: undefined,
      alarmLevel: undefined,
      alarmStatus: undefined,
      alarmSystem: undefined,
      deviceCode: undefined,
      deviceName: undefined,
      endTime: undefined,
      orderByDesc: undefined,
      pageNum: 1,
      pageSize: 10,
      pointId: undefined,
      pointName: undefined,
      startTime: undefined
    };
    handleQuery();
  };
  onMounted(() => {
    console.log('response', authNav.deviceCode);
    // getList();
  });
</script>

<style lang="scss" scoped>
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .modal-content {
    width: 1500px;
    background: rgba(5, 30, 67, 0.95);
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(5, 30, 67, 0.8);
      width: 100%;
      height: 34px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.5);
      .modal-header-left {
        display: flex;
        align-items: center;
        margin-left: 8px;
        img {
          width: 20px;
          height: 20px;
          margin-right: 10px;
        }
        span {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
        }
      }
      .close-button {
        cursor: pointer;
        font-size: 20px;
      }
      img {
        width: 16px;
        height: 16px;
        margin-right: 20px;
        &:hover {
          cursor: pointer;
          opacity: 0.85;
        }
      }
    }
    .m-c-box {
      width: 100%;
      // height: 20vh;
      border-radius: 4px;
      .e-box {
        width: 100%;
        .pagination-box {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 25px 0 18px 0;
        }
        .e-form {
          padding: 20px 10px 0 10px;
        }
      }
    }
  }
  :deep(.el-form-item__label) {
    color: #ffffff;
  }
  :deep(el-tooltip__trigger) {
    color: #ffffff !important;
  }
  :deep(.el-select__wrapper) {
    background-color: #0a1736 !important;
    outline: none !important;
    color: #fff !important;
  }

  :deep(.el-input__wrapper) {
    background-color: #0a1736 !important;
  }
  :deep(.el-table) {
    background-color: transparent !important;
    color: #fff !important;
    opacity: 0.9;
    outline: none !important;
  }

  :deep(.el-table) tr {
    outline: none !important;
    border: none !important;
    /* background-color: transparent !important; */
    /* height: 30px !important; */
    background-color: rgba(10, 138, 206, 0.6) !important;
    cursor: pointer;
  }

  :deep(.el-table th.is-leaf) {
    border: none !important;
    outline: none !important;
  }

  :deep(.el-table--medium td) {
    padding: 5px 0 !important;
    margin-top: 5px !important;
  }

  :deep(.el-table td) {
    border: none !important;
    outline: none !important;
    background-color: transparent !important;
  }

  :deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
    /* background-image: url(../../../assets/img/preview/c_check.png) ; */
    background-color: rgba(21, 60, 96, 0.6) !important;
    outline: none !important;
  }

  :deep(.el-table .cell) {
    line-height: normal !important;
  }

  :deep(.el-table--enable-row-transition .el-table__body td.el-table__cell) {
    /* background-image: url(../../../assets/img/preview/c_check.png) !important; */
    background-color: RGBA(18, 80, 123, 0.1) !important;
    border-bottom: 2px solid rgba(5, 30, 67, 0.7) !important;

    outline: none !important;
  }

  :deep(.el-table .el-table__header-wrapper th) {
    /* background-color: transparent !important; */
    width: 100%;
    background: url('../../../assets/images/home-page/tb-bg.png') !important;
    background-size: 100 100% !important;
    color: #fff !important;
    font-size: 12px !important;
  }

  :deep(.el-table .el-table__header-wrapper .el-checkbox__inner) {
    background-color: transparent !important;
  }

  :deep(.el-table .el-table__header-wrapper .el-checkbox__inner::after) {
    border-color: #fff !important;
  }

  :deep(.el-table .el-table__header-wrapper .el-checkbox__inner:hover) {
    border-color: #fff !important;

    height: 40px !important;
    color: #fff !important;
    font-size: 12px !important;
  }

  :deep(.el-table__body-wrapper) {
    height: 210px;
    overflow-y: scroll !important;
  }

  :deep(.el-table__body-wrapper::-webkit-scrollbar) {
    width: 0px !important;
    background: transparent !important;
    cursor: pointer !important;
  }

  /* 滚动条轨道部分 */
  :deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
    background-color: transparent !important;
    /* background-color: rgb(15, 43, 87) !important; */
  }

  /* 滚动条滑块部分 */
  :deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
    border-radius: 0px !important;
    /* background-image: linear-gradient(135deg, #193b82, #193b82); */
    background-color: transparent !important;
  }

  :deep(.el-table::before) {
    background-color: transparent !important;
  }
  :deep(.el-table--fit .el-table__inner-wrapper:before) {
    background-color: transparent !important;
  }
  :deep(.el-pagination__goto) {
    color: #fff !important;
  }
  :deep(.el-pagination__total) {
    color: #fff !important;
  }
  :deep(.el-pagination__jump) {
    color: #fff !important;
  }
  :deep(.el-pagination__editor) {
    color: #fff !important;
  }
  :deep(.el-pagination__editor.el-input .el-input__inner) {
    color: #fff !important;
  }
  :deep(.el-pagination__sizes .el-input .el-input__inner) {
    color: #fff !important;
  }

  :deep(.el-pagination.is-background .btn-prev) {
    background-color: #11233d !important;
    border: 1px solid #4f687a !important;
    color: #fff !important;
  }

  :deep(.el-pagination.is-background .el-pager li) {
    background-color: #11233d !important;
    border: 1px solid #4f687a !important;
    color: #fff !important;
  }

  :deep(.el-pagination.is-background .el-pager li.is-active) {
    background-color: #083b98 !important;
    border-color: #4f687a !important;
  }

  :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
    background-color: #193b82 !important;
    border-color: #193b82 !important;
  }

  :deep(.el-pagination.is-background .btn-next) {
    background-color: #11233d !important;
    border: 1px solid #4f687a !important;
    color: #fff !important;
  }
  :deep(.el-input__inner) {
    color: #fff !important;
  }
  :deep(.el-select__selected-item) {
    color: #fff !important;
  }
  :deep(.el-date-editor .el-range-input) {
    color: #fff !important;
  }
</style>
